<template>
	<div>
		<el-container>
			<!-- 头部 -->
		  <el-header>
			  
			  <div style="color:#D1C2D8 ;float: left; margin-top: 0.625rem;">众筹平台，控制面板</div>
			  <el-dropdown split-button type="primary" style="float: right">
			    {{user.adminName}}
			    <el-dropdown-menu slot="dropdown" >
					<el-dropdown-item icon="el-icon-user" >个人信息</el-dropdown-item>
					
					  <!-- <el-dropdown-item icon="el-icon-switch-button" @click="exit()">退出</el-dropdown-item> -->
			      <el-button @click="exit()" icon="el-icon-switch-button">退出</el-button>
			    </el-dropdown-menu>
			  </el-dropdown>
			   
		  </el-header>
		  
		  <!--  -->
		  <el-container>
		    <el-aside width="200px">
				
				<el-menu unique-opened style="border-right: none;" router @open="handleOpen" @close="handleClose" background-color="#2C3E50" text-color="#fff"
					active-text-color="#ffd04b">
					
					 
					
					<!-- 一级菜单 -->
					<el-submenu :index="it.path" v-for="it in menus"  v-if="it.powers.length!=0">
						<!-- 菜单模板 -->
						<template slot="title">
							<!-- 菜单图标 -->
							<i :class="it.icon"></i>
							<!-- 菜单名称 -->
							<span>{{it.name}}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item :index="itt.path" v-for="itt in it.powers">
				
							<template slot="title">
								<i :class="itt.icon"></i>
								<span>{{itt.name}}</span>
							</template>
						</el-menu-item>
				
					</el-submenu>
					<el-menu-item  :index="it.path" v-for="it in menus"  v-if="it.powers.length==0">
									
						<template slot="title">
							<i :class="it.icon"></i>
							<span>{{it.name}}</span>
						</template>
					</el-menu-item>
				
					
					
					
				
				
				</el-menu>
				
			</el-aside>
			
			<!-- 主 -->
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				user:{},
				menus:[]
			}
		},
		methods:{
			exit(){
				
				 this.$confirm('确定退出码?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$message({
				            type: 'success',
				           
				          });
						   window.sessionStorage.clear();
				            this.$router.push('/index');
						  
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消退出'
				          });          
				        });
				 
			}
		},
		
		async mounted(){
			this.user=JSON.parse(window.sessionStorage.getItem('user'))	
			
			var menu=await this.$http.get('queryPowerByUserid?userId='+this.user.adminId)
			this.menus=menu.data
			
			
			
			
		}
	}
</script>

<style>
	 .el-header{
		 width: 100%;
		 height: 12.5rem;
		 background-color: #123211;
	 }
	 .el-aside{
		 height: 100vh;
		 width: 200px;
		 background-color: #333333;
	 }
</style>
